
<template>
<!-- 环状图 中间有文字 -->
  <chart :options="options" />
</template>
<script>
export default {
  name: 'ChartBar',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    legend: {
      type: Array,
      default: () => {
        return []
      }
    },
    colors: {
      type: Array,
      default: () => {
        return null
      }
    },

    text: {
      type: String,
      default: () => {
        return ''
      }
    },
    subtext: {
      type: String,
      default: () => {
        return ''
      }
    },
    roseType: {
      type: String,
      default: () => {
        return ''
      }
    },
    radius: {
      type: Array,
      default: () => {
        return []
      }
    },
    labelLine: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    label: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    position: {
      type: String,
      default: () => {
        return 'outside'
      }
    },
    left: {
      type: String,
      default: () => {
        return ''
      }
    },
    top: {
      type: String,
      default: () => {
        return 'middle'
      }
    },
    orient: {
      type: String,
      default: () => {
        return 'vertical'
      }
    },
    subfontSize: {
      type: Number,
      default: 18
    },
    textfontSize: {
      type: Number,
      default: 18
    },
    itemGap: {
      type: Number,
      default: () => {
        return null;
      },
    },
  },
  data () {
    return {
    }
  },
  computed: {
    options () {
      const _this = this
      var legend = {
        formatter (name) {
          const than = _this.data // 获取series中的data
          let total = 0
          let tarValue
          let units
          for (let i = 0, l = than.length; i < l; i++) {
            total += than[i].value
            if (than[i].name == name) {
              tarValue = than[i].value
              units = than[i].units
            }
          }
          return name + ' ' + ' ' + tarValue + '' + units
          // let p = (tarValue / total) * 100;
          // return name + " " + " " + p.toFixed(2) + "%";
        },
        type: 'scroll',
        orient: this.orient,
        left: this.left,
        align: 'auto',
        top: this.top,
        textStyle: {
          color: _this.colors,
          fontSize: 22
        },
        data: _this.legend,
        itemGap: _this.itemGap,
        itemWidth: 10, // 设置图例宽度
		    itemHeight: 10, // 设置图例高度,
        z:1 // 二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
      }
      return {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: '58%',
          y: '42%',
          textAlign: 'center',
          textStyle: {
            color: '#F0F2F5',
            fontSize: this.textfontSize,
            fontFamily: 'DINAlternate-Bold',
            // fontWeight: "bold",
            fontStyle: 'normal',
            fontWeight: 'normal'
          },
          subtextStyle: {
            fontSize: this.subfontSize,
            fontFamily: 'DINAlternate-Bold',
            fontWeight: 'bold',
            color: '#03D3FF'
          },
        },

        tooltip: {
          trigger: 'item',
          borderColor: 'rgba(255,255,255,.3)',
          backgroundColor: 'rgba(13,5,30,.6)',
          borderWidth: 1,
          padding: 5,
          formatter: function (parms) {
            var str =
              parms.marker +
              '' +
              parms.data.name +
              '</br>' +
              parms.data.value + ' ' + ' ' + parms.data.units +
              '</br>' +
              '占比：' +
              parms.percent +
              '%'
            return str
          }

          // formatter: function (parms) {
          //   var str =
          //     parms.marker +
          //     "" +
          //     parms.data.name +
          //     "</br>" +
          //     "数量：" +
          //     parms.data.value +
          //     "</br>" +
          //     "占比：" +
          //     parms.percent +
          //     "%";
          //   return str;
          // },
        },
        legend: legend,
        color: this.colors,
        series: [
          {
            showVal: true,
            type: 'pie',
            center: ['75%', '50%'],
            radius: this.radius,
            clockwise: true,
            avoidLabelOverlap: true,
            roseType: this.roseType,
            hoverOffset: 15,
            itemStyle: {
              borderWidth: 5, // 设置border的宽度有多大
              borderColor: 'rgba(7,81,112,0)'
            },
            label: {
              normal: {
                show: this.label,
                position: this.position,
                formatter: '{a|{b}：{d}%}\n{hr|}',
                padding: [50, -40],
                textStyle: {
                  fontWeight: 300,
                  fontSize: 28, // 文字的字体大小
                  color: '#fff'
                },
                // formatter:'{d}%'
                // },
                rich: {
                  a: {
                    padding: [-10, 15, -20, 15]
                  }
                }

              }

            },
            labelLine: {
              normal: {
                show: this.labelLine,
                lineStyle: {
                  color: 'rgba(171, 191, 213, 1)',
                  width: 1
                },
                length: 20,
                length2: 30
              }
            },
            itemStyle: {
              borderColor: '#040e3c',
              borderWidth: 5
            },
            data: this.data
          }
        ],
        backgroundColor: 'rgba(7,81,112,0)'
      }
    }
  }
}
</script>
